<template>
  <div class="section-wrap">
    <div class="header">
      <x-icon style="fill:#fff;margin-top:8px;" type="ios-close-empty" size="30" class="icon-white" @click="goBack"></x-icon>
      <h3>风险管理</h3>
      <a class="saveBtns" @click="saveItem" v-if="canAudit">保存</a>
    </div>
    <div class="form-section"> 
      <div class="form-item form-item-style2">
        <div class="label-title space-between">
          <div class="space-between">
            <label>关键要求</label>
          </div>
          <span @click="unfoldMeasure = !unfoldMeasure">{{unfoldMeasure?'收起': '展开'}}</span>
        </div>
        <div>
          <p class="textarea"
             :class="{'unfold':unfoldMeasure}">{{dataDetail.keyRequire}}</p>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>合理缺项</label>
        </div>
        <div style="width:60%;height:100%;" class="s_fixed">
          <x-switch v-model="dataDetail.isMissingItem" :value-map="[0,1]" :title="' '" @on-change="changeIsMissing" :disabled="!canAudit"></x-switch>
        </div>

      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>应得分</label>
        </div>
        <p>{{dataDetail.shouldScore}}</p>
      </div>
      <div class="form-item form-item-style1">       
          <div class="label-title" v-if="!canAudit">
          <label>实得分</label>
        </div>
        <p v-if="!canAudit">{{dataDetail.actualScore}}</p>
         <group class="numBut" style="width:100%;"  v-else>
          <x-number :title="titleActualScore" v-model="dataDetail.actualScore" :min="0" :max="dataDetail.shouldScore" :fillable="true" :disabled="fillable"></x-number>
        </group>
      </div>
      <div class="form-item form-item-style2">
        <div class="label-title space-between">
          <div class="space-between">
            <label>问题图片</label>
          </div>
          <span v-if="dataDetail.projectImgList">当前共{{dataDetail.projectImgList.length}}张照片</span>
        </div>
        <div>
        <div class="upload-wrap" v-if="dataDetail.projectImgList">
          <div class="upload-item"
         v-for="(item,index) in dataDetail.projectImgList"
         :key="index">
      <img :src="baseurl+'/'+item.url"
           :preview="preview"
           alt="">
      <span v-if="canAudit"
            @click="removeImg(item.name,index)"></span>
    </div>
    <div class="upload-item" v-if="canAudit">
      <img src="@static/images/upload.png"
           alt="">
      <input type="file"
             :name="('file')"
             @change="upload">
    </div></div>
        </div>
      </div>
      <div class="form-item form-item-style2" style="clear: both;border-bottom: 1px solid #efeff4;">
        <div class="label-title" style="width:100%">
          <label>扣分原因</label>
        </div>
        <div class="s_textarea">
          <x-textarea v-model="dataDetail.deductionReason" :max="50" :disabled="!canAudit"></x-textarea>
        </div>
      </div>
      <div v-if="dataDetail.rectificationCs" class="form-item form-item-style2" style="clear: both;border-bottom: 1px solid #efeff4;">
        <div class="label-title" style="width:100%">
          <label>整改要求</label>
        </div>
        <div class="s_textarea">
          <x-textarea v-model="dataDetail.rectificationCs" disabled></x-textarea>
        </div>
      </div>
      <div v-if="dataDetail.rectificationDate" class="form-item form-item-style1">
        <div class="label-title">
          <label>整改期限</label>
        </div>
        <p>{{dataDetail.rectificationDate.substring(0, 10)}}</p>
      </div>
    </div>
  </div>
</template>
<script>
import upload from "@/commonComponents/upload/index";
import { XSwitch, Group, XNumber, XTextarea,ConfirmPlugin   } from "vux";
export default {
  name: "riskManage2",
  props: {
    dataDetail: {
      type: Object,
      default: function() {
        return {
          keyRequire: "",
          shouldScore: 0,
          actualScore: 0,
          deductionReason: "",
          rectificationCs: "",
          rectificationDate: "",
          projectImgList: []
        };
      }
    },
    canAudit: {
      type: Boolean,
      default: true
    },
    ismissing:{
      type: Boolean,
      default: false
    }
  },
  watch: {
    dataDetail(val) {
      if (val) {
        if (val.projectImgList) {
          this.length = val.projectImgList.length;
        }
      }
    }
  },
  data() {
    return {
      preview: "",
      baseurl: this.$axiosAjax.baseurl,
      unfoldMeasure: false, // 是否展开
      imgList: [],
      titleMissingItem: "合理缺项",
      titleActualScore: "实际得分",
      fillable: false,
      titleReason: "扣分原因",
      length: 0
    };
  },
  components: {
    upload,
    XSwitch,
    Group,
    XNumber,
    XTextarea
  },
  created() {
    this.preview = new Date().getTime();
  },
  methods: {
    goBack() {
      this.$emit("nodeClick");
    },
    changeIsMissing(val) {
      if (val == "1") {
        this.dataDetail.shouldScore = 0;
        this.dataDetail.actualScore = 0;
        this.fillable = true;
      } else {
        this.dataDetail.shouldScore = this.dataDetail.oldShouldScore;
        this.fillable = false;
      }
    },
    saveItem() {
      if(!this.dataDetail.actualScore){
        this.dataDetail.actualScore=0;
      }
      this.$emit("save", this.dataDetail);
    },
    upload(e) {
      let This = this;
      let file = e.target.files[0];
      let param = new FormData();
      param.append("file", file);
      This.$axiosAjax.upload(param).then(res => {
        This.dataDetail.projectImgList.push({
          name: res.data.result.fileName,
          size: res.data.result.fileSize,
          url: res.data.result.fileUrl
        });
      });
    },
    removeImg(name, index) {
        document.getElementsByClassName('weui-mask_transparent')[0].style.zIndex=600;
      document.getElementsByClassName('weui-dialog')[1].style.zIndex=601;
     this.$vux.confirm.show({
       content:'确定是否删除图片',
  onCancel : () => {
    console.log(this) //当前 vm
  },
  onConfirm : () => {
     this.dataDetail.projectImgList.splice(index, 1);
  }
})
     
    }
  }
};
</script>
<style lang="less" scoped>
.section-wrap {
  height: 100%;
}

.select-section {
  display: flex;
}

.select-section div {
  padding-left: 26px;
  background: url(../../../static/images/select.png) no-repeat left center;
  background-size: 17px 17px;
}

.select-section div:first-child {
  margin-right: 58px;
}

.select-section .active {
  background: url(../../../static/images/selected.png) no-repeat left center;
  background-size: 17px 17px;
}

.weui-cell_switch {
  width: 100%;
}

a {
  height: 40px;
  border-radius: 20px;
  display: inline-block;
  width: 200px;
  text-align: center;
  line-height: 40px;
  color: #fff;
}

.saveBtns {
    background: #469b7a;
    color: #fff;
    float: right;
    padding-right: 15px;
    border-left:1px solid #fff;
    padding-left: 15px;
    width: 70px;
    border-radius:0;
}
.header {
      display: flex;
      justify-content: space-between;
      height: 40px;
      line-height: 40px;
      background-color: #469b7a;
      padding-right: 15px;
      h3 {
        color: #fff;
      }
    }
    .section-wrap {
      display: flex;
      flex-direction: column;
      .form-section {
        flex: 1;
        overflow-y: scroll;
      }
    }
</style>
<style lang="less">
  .numBut .vux-number-selector-sub{
    height: 36px !important;
    padding-top: 8px;
  }

  .numBut .vux-number-input{
     height: 36px !important;
  }

  .numBut .vux-number-selector-plus{
     height: 36px !important;
     padding-top: 8px;
  }

    .numBut .vux-cell-primary{
      padding-top: 10px;
    }

    .upload-wrap .upload-item{
      float: left;
      margin-top: 20px;
    }
    .weui-cells{
       border-top: 1px solid #efeff4;
    }
    .weui-label{
      margin-top: 6px;
    }
    .form-item .s_textarea {
      width:100%;
      padding-right:20px;
      height: 60px;
    }
    .s_fixed {
      width: 100%;
      height: 100%;
    }
    .s_fixed .vux-x-switch{
      height: 100%;
      overflow: hidden;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
    .s_fixed .vux-x-switch .weui-cell__bd {
      height: 100%;
    }
    .s_fixed .vux-x-switch .weui-cell__bd  .weui-label {
      margin-top: 0 !important;
    }
    .s_fixed .vux-x-switch .weui-cell__ft{
      padding-top: 25px;
    }
</style>
